<!-- 轮播图 -->
<template>
  <div>
    <!--    <hr>-->
    <div>
      <el-row>
        <el-col :span="4" class="grid-content"></el-col>
        <el-col :span="16">
          <el-carousel
            :interval="2000"
            type="card"
            height="470px"
            style="margin-top: 20px"
          >
            <el-carousel-item>
              <!--                       1000* 448-->
              <img src="../../assets/lunbo1.png" style="height: 470px" />
            </el-carousel-item>
            <el-carousel-item>
              <!--                       1000* 448-->
              <img src="../../assets/lunbo2.png" style="height: 470px" />
            </el-carousel-item>
            <el-carousel-item>
              <!--                       1000* 448-->
              <img src="../../assets/lunbo3.png" style="height: 470px" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="4" class="grid-content"></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Carousel",
  data() {
    return {
      imgsList: [
        { imgUrl: "../../assets/lunbo1.png" },
        { imgUrl: "../../assets/lunbo2.png" },
        { imgUrl: "../../assets/lunbo3.png" },
      ],
      background: [{}],
    };
  },
};
</script>

<style>
/*.el-carousel__item img {*/
/*    color: red;*/
/*    font-size: 36px;*/
/*    opacity: 1;*/
/*    line-height: 400px;*/
/*    margin: 3px;*/
/*}*/
.myside {
  height: 520px;
  background: white;
  display: flex;
  justify-content: center;
  /*border: #0b0b0b 1px solid;*/
}

/**
   修改elementui的默认样式
   */
.el-container .el-header {
  background: white;
}

.el-container .el-main {
  background: white;
  margin: 0px;
  padding: 1px;
}

/*轮播栏*/
/*.el-carousel__container {*/
/*  position: relative;*/
/*  !*width: 1000px;*!*/
/*  margin: 0px 1px;*/
/*  !*border: #ff4141 1px solid;*!*/
/*  !*margin-left: 286px;*!*/
/*  margin-top: 20px;*/
/*}*/

.lunbo {
  padding: 3px 0px;
  margin-left: 8px;
  height: 520px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/*.el-carousel {*/
/*    height: 353px;*/
/*}*/

/*.el-carousel__item:nth-child(2n) {*/
/*    background-color: #99a9bf;*/
/*}*/

/*.el-carousel__item:nth-child(2n + 1) {*/
/*    background-color: #d3dce6;*/
/*}*/
</style>
